<template>
  <div>
    <h1>样式处理</h1>
    <!-- 
      v-bind可以动态的设置属性
        操作样式： class  style
      v-bind在操作class和style属性的时候，做了增强，可以让我们更变的操作样式

      v-bind:class=""  可以允许提供对象和数组
    -->
    <div class="box" :class="[isPink ? 'pink' : '', isBlue ? 'blue':'']">123</div>
    <div class="box" :class="{pink: isPink}">123</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPink: true,
      isBlue: true
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.pink {
  background-color: pink;
}

.blue {
  color: blue;
}
</style>